<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>属性名表达式</title>
  </head>
  <body>
    <script>
      // JavaScript定义对象的属性，有俩种方法；
      // 方法一
      var obj = {}
      obj.foo = true;
      // 方法二
      obj["a" + "bc"] = 123;
      console.log(obj)//{foo: true, abc: 123}
      /**
       * 上面代码的方法一是直接使用标识符作为属性名，方法二是用表达式作为属性名，
       * 这时要将表达式放在方括号之内。
       *
       * 但是，如果使用字面量方式定义对象(使用大括号),在es5中只能使用方法一定义属性
       * es6允许使用方法二
      */
     var propKey = 'foo';
     var obj = {
       [propKey]: true,
       ['a' + 'bc']: 123
     }
     console.log(obj);//{foo: true, abc: 123}
     // 表达式同样可以定义方法名
     var obj = {
       ['h' + 'ello']() {
         console.log('hi')
       }
     };
     obj.hello(); // hi
     // 注意，属性名表达式与简洁表示法，不能同时使用，会报错。
    //  // 报错
    //  var foo = 'bar';
    //  var bar = 'abc';
    //  var baz = { [foo] };
     // 正确
     var foo = 'bar';
     var baz = { [foo]: 'abc'};
     // 注意，属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串[object object],这一点要特别小心
     var keyA = {a: 1};
     var keyB = {b: 2};
     var myObject = {
       [keyA]: 'valueA',
       [keyB]: 'valueB'
     };
    console.log(myObject); // Object {[object Object]: "valueB"}
    //上面代码中，[keyA]和[keyB]得到的都是[object Object]，所以[keyB]会把[keyA]覆盖掉，而myObject最后只有一个[object Object]属性。
    </script>
    <script>
      // 取属性
      var obj = {
        label: '零售',
        value: '01'
      }
      console.log('对象取属性', obj['label'])
    </script>
  </body>
</html>
